<template>
  <view class="ver-layout">
    <view v-for="(map,mIdx) in mapInfos" :key="mIdx" class="card-layout ver-layout">
      <view class="map-type">{{ map.name }}</view>
      <view v-for="(item,index) in getMapData(map.mapKey)" :key="index" class="shop-item">
        <view class="hor-layout-side-center">
          <view>店铺名称：{{ item.name || item.title }}</view>
          <view><button type="success" size="mini" @click="toDetail(map,item)">详情</button></view>
        </view>
        <view> 店铺位置：{{ item.address }}</view>
        <view class="hor-layout-center">
          <view style="margin-right: 5px">手机号：{{ item.tel || item.telephone }}</view>
          <uni-icons v-if="checkPhone(item)" type="info-filled" color='green' size="23"></uni-icons>
          <uni-icons v-else type="info-filled" color='red' size="23"></uni-icons>
        </view>
        <view class="hor-layout-center">
          <image class="shop-image" v-for="(img,idx) in item.photos" :key="idx" :src="img.url"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import UniIcons from "../../../components/uni-icons/uni-icons";

export default {
  name: "map",
  components: {UniIcons},
  data() {
    return {
      mapInfos: [
        {name: '高德地图数据：', mapKey: 'gdMaps'},
        {name: '百度地图数据：', mapKey: 'bdMaps'},
        {name: '腾讯地图数据：', mapKey: 'txMaps'},
      ],
      gdMaps: [],
      txMaps: [],
      bdMaps: [],
      mPhones: ['13614745452', '15247439820', '15847403483']
    }
  },
  onLoad() {
    this.getTypeMapInfo()
  },
  methods: {
    checkPhone(item) {
      let phone = item.tel || item.telephone
      let splitSpan = ' '
      if (phone.indexOf(';') != -1) splitSpan = ';'
      if (phone.indexOf(',') != -1) splitSpan = ','
      let phoneList = phone.split(splitSpan)
      let notInItem = phoneList.find(item => this.mPhones.indexOf(item) == -1)
      return notInItem ? false : true
    },
    getMapData(type) {
      return this[type]
    },
    getMapInfo(type) {
      return uniCloud.callFunction({name: 'api-request', data: {action: 'checkMapInfo', type}})
    },
    async getTypeMapInfo() {
      //https://apis.map.qq.com/uri/v1/geocoder?coord=40.525498,112.497912&referer=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77
      this.$tools.showLoading()
      let {result: {pois}} = await this.getMapInfo('gd')
      this.gdMaps = pois
      let {result: {data}} = await this.getMapInfo('tx')
      this.txMaps = data
      let {result: {result}} = await this.getMapInfo('bd')
      this.bdMaps = result
      // console.log("getTypeMapInfo", res)
      uni.hideLoading()
    },
    toDetail(map, item) {
      let url = ''
      if (map.name.indexOf('百度地图数据') != -1) url = item.uid && `http://api.map.baidu.com/place/detail?uid=${item.uid}&output=html&src=webapp.baidu.openAPIdemo`
      if (map.name.indexOf('高德地图数据') != -1) url = item.id && `https://uri.amap.com/poidetail?poiid=${item.id}&src=mypage&callnative=0`
      if (map.name.indexOf('腾讯地图数据') != -1) url = item.id && `https://map.qq.com/m/detail/poi/poid=${item.id}`
      if (url) window.location.href = url
      else this.$tools.showToast("暂无详情！")
    }
  }
}
</script>

<style scoped>
.card-layout {
  margin: 10px;
  padding: 10px;
  width: calc(100% - 10 * 4px);
  background: #e1e1e1;
  border-radius: 8px;
}

.shop-item {
  margin-top: 10px;
  padding: 10px;
  border-radius: 6px;
  background: #b7d6dd;
  font-size: 14px;
}

.shop-image {
  width: 80px;
  height: 80px;
  margin-right: 10px;
  border-radius: 7px;
}

.map-type {
  color: #8a2be2;
}
</style>
